<template>
  <!-- 主页 -->
  <div class="index">
    <!-- 顶部 -->
    <div class="head">
      <!-- 背景图片 -->
      <div style="height: 102px;background-color: #99cc33;">
        <van-image
          width="90%"
          height="167"
          fit="cover"
          class="head-image"
          src="index_bg.jpg"
        ></van-image>
      </div>
      <!-- 功能项 -->
      <div class="row-space-around" style="margin-bottom:10px;">
        <div class="column-center">
          <van-icon name="calender-o" color="#FF9900" size="32" />
          <p class="gird-p">出勤情况</p>
        </div>
        <div class="column-center" @click="LeaveList">
          <van-icon name="underway-o" color="#FF9900" size="32" />
          <p class="gird-p">请假申请</p>
        </div>
        <div class="column-center">
          <van-icon name="volume-o" color="#FF9900" size="32" />
          <p class="gird-p">通知公告</p>
        </div>
      </div>
    </div>
    <!-- 热销课程 -->
    <p class="text-p1">热销课程</p>
    <!-- 热销课程列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="到底了"
      @load="onLoad"
      :immediate-check="false"
      :error="error"
    >
      <div
        class="column-center"
        style="margin-top:7px;"
        v-for="(item,index) in list"
        :key="index"
        @click="bindToBuy(item)"
      >
        <div class="list-item flex-row">
          <van-image width="32%" fit="contain" :src="item.courseImg" />
          <div class="column-space-around" style="background-color:#fff;padding:7px;width:63%;">
            <p class="text-p2">{{item.courseName}}</p>
            <p class="text-p3" v-html="item.courseDescribe"></p>
            <p class="text-p4">
              <span>{{item.courseType}}</span>
              <span v-if="item.courseAddress!=''">-</span>
              <van-icon name="location" size="10" color="#F40404" v-if="item.courseAddress!=''" />
              {{item.courseAddress}}
            </p>
            <div style="text-align:left">
              <span style="color:#F40404;font-size:13px;">￥{{item.intervalPrice|minPriceFilter}}</span>
              <span
                v-if="item.makingPrice != ''"
                class="line-m"
                style="color: rgba(16, 16, 16, 0.45);font-size: 12px;"
              >￥{{(item.makingPrice)|fixed}}</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
    <div style="height:60px;"></div>
  </div>
</template>

<script>
import { ShowCourse } from "@/api/course";
import { Toast } from "vant";
import { mapGetters } from "vuex"; 
export default {
  data() {
    return {
      list: [],
      page: 1, //当前页码
      pageSize: 9, //一页显示的总数
      total: 0,
      lastPage: 0,
      loading: false,
      finished: false,
      error: false
    };
  },
  methods: {
    bindToBuy(data) {
      this.$store.commit("setCourse", data);
      this.$router.push({
        path: "buy"
      });
    },
    LeaveList() {
      this.$router.push("LeaveList");
    },
    // 加载更多数据
    async onLoad() {
      if (this.lastPage != 0 && this.page < this.lastPage) {
        this.page += 1;
        const result = await ShowCourse({
          showCourse: "1",
          page: this.page,
          size: this.pageSize
        });
        if (result.result == "OK") {
          this.list = this.list.concat(result.data.data);
          this.total = result.data.total;
          this.lastPage = result.data.lastpage;
        } else {
          this.error = true;
        }
      }
      // 加载状态结束
      this.loading = false;

      // 数据全部加载完成
      if (this.lastPage == this.page) {
        this.finished = true;
      }
    }
  },
  async created() {
    Toast.loading({
      forbidClick: true,
      duration: 0
    });
    const result = await ShowCourse({
      showCourse: "1",
      page: this.page,
      size: this.pageSize,
      parentAccount: this.phone
    });
    if (result.result == "OK") {
      this.list = result.data.data;
      this.total = result.data.total;
      this.lastPage = result.data.lastpage;
    }
    Toast.clear();
  },
  computed: {
    ...mapGetters({ phone: "getPhone" })
  },
  filters: {
    minPriceFilter(value) {
      if (value.indexOf("-") > 0) {
        return value.substring(0, value.indexOf("-"));
      } else {
        return value;
      }
    },
    fixed(value) {
      return parseFloat(value).toFixed(2);
    }
  }
};
</script>
<style>
.text-p3 p {
  margin: 0 !important;
  /* color: red !important; */
}
</style> 
<style lang="scss" scoped>
.index {
  background-color: #f7f7f7;
  font-family: PingFangSC-regular;
}
.head {
  height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  width: 100%;
  background-color: #fff;
}
.gird-p {
  font-size: 10px;
  color: rgba(136, 135, 135, 1);
  margin: 0;
}
.head-image {
  background-color: #ff9900;
  margin-top: 28px;
}
.text-p1 {
  color: #101010;
  font-size: 13px;
  margin: 12px 0 0 22px;
  text-align: left;
  height: auto;
}
.text-p2 {
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  margin: 3px 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-p3 {
  margin: 0;
  color: rgba(16, 16, 16, 0.65);
  font-size: 12px;
  text-align: left;
  line-height: 12px;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-p4 {
  color: rgba(16, 16, 16, 0.65);
  font-size: 10px;
  text-align: left;
  margin: 7px 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-item {
  width: 95%;
  height: 116px;
  background-color: #fff;
  line-height: 20px;
  border-radius: 4px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  font-family: Arial;
  border: 1px solid rgba(255, 255, 255, 0);
}
</style>